<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>


	<!-- bootstarp-fileinput -->
	<link rel="stylesheet" type="text/css" href="../js/bootstrap-fileinput/css/fileinput.min.css"/>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/fileinput.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap-fileinput/js/locales/zh.js"></script>



</head>



<script>

	$(function(){
		getSheng();
		fileInit();
	})

	//初始化上传插件 及上传路径和回显配置
	function fileInit(){
		$('#myFile').fileinput({
			language: 'zh',
			uploadUrl: '/tbGoodsController/uploadImage',
			maxFileCount :3, // multiple
			enctype : 'multipart/form-data',
			maxFileSize : 1024, //单位为kb
			allowedFileExtensions : ['jpg', 'gif', 'png'],//限制上传文件类型
			browseClass: 'btn btn-primary'
		});

		$('#myFile').on('fileuploaded',function(event, data, previewId, index){
			//data.response获取的就是后台return 的对象
			var result = data.response;
			var url = result.data;
			$("#fileAddr").val(url);
		})
	}


	//增加图片点击保存
	function uploadImage(){
		//获取颜色
		var color = $("#imageColor").val();
		var url = $("#fileAddr").val();
		var data = '<tr><td>'+color+'</td><td><img src="'+url+'" width="100px" height="100px"></td><td> <button type="button" class="btn btn-default" title="删除" onclick="delimgTemplate(this)"><i class="fa fa-trash-o"></i>删除</button></td></tr>';
		$("#imgTemplateId").append(data);
	}

	//删除图片
	function delimgTemplate(obj){
		var tr = $(obj).parent().parent();
		tr.remove();
	}


	function getSheng(){
		var html="<option value='-1'>--请选择--</option>";
		$.ajax({
			url:"/tbGoodsController/getTbItemCat",
			data:{pid:0},//参数
			dataType:"json",
			type:"post",
			async:false,
			success:function(data){
				$(data).each(function(i,e){
					html+="<option value='"+e["id"]+"'>"+e["name"]+"</option>";
				})
				$("#sheng").html(html);
			},
			error:function(data){
				alert("系统错误，请联系管理员");
			}
		})
	}

	function getShi(obj){
		$("#xian").html("<option value='-1'>--请选择--</option>");
		var html="<option value='-1'>--请选择--</option>";
		$.ajax({
			url:"/tbGoodsController/getTbItemCat",
			data:{pid:$(obj).val()},//参数
			dataType:"json",
			type:"post",
			async:false,
			success:function(data){
				$(data).each(function(i,e){
					html+="<option value='"+e["id"]+"'>"+e["name"]+"</option>";
				})
				$("#shi").html(html);
			},
			error:function(data){
				alert("系统错误，请联系管理员");
			}
		})
	}

	function getXian(obj){
		var html="<option value='-1'>--请选择--</option>";
		$.ajax({
			url:"/tbGoodsController/getTbItemCat",
			data:{pid:$(obj).val()},//参数
			dataType:"json",
			type:"post",
			async:false,
			success:function(data){
				$(data).each(function(i,e){
					html+="<option value='"+e["id"]+"'>"+e["name"]+"</option>";
				})
				$("#xian").html(html);
			},
			error:function(data){
				alert("系统错误，请联系管理员");
			}
		})
	}

	function brandSelect(obj) {
		var it="";
		var ti="";
		var p="";
		$.ajax({
			url:"/tbGoodsController/getTbTypeTemplate",
			data:{id:$(obj).val()},//参数
			dataType:"json",
			type:"post",
			async:false,
			success:function(data){
				$("#tid").val(data.id);

				//品牌遍历拼接
				it+='<option value="-1">请选择</option>';

				var Joining =JSON.parse(data.brandIds);

				for (var i=0; i<Joining.length;i++){
					var a = Joining[i].id;
					var b = Joining[i].text;
					it+='<option value="'+a+'">'+b+'</option>';
				}
				$("#TbBrandIds").html(it);
				var zxc=JSON.parse(data.customAttributeItems);
				for (var w=0;w<zxc.length;w++){
					var f=zxc[w].text;
					ti+='<div><div class="col-md-2 title">'+f+'</div><div class="col-md-10 data"><input class="form-control" placeholder="'+f+'"></div></div>';
				}

				$("#extension").html(ti);

		/*		var qaz=JSON.parse(data.specIds);
				for (var s=0;s<qaz.length;s++){
					var c=qaz[s].text;
					specifications(c);
					p+='<th class="sorting" >'+c+'</span></th>';

				}
				p+='<th class="sorting">价格</th><th class="sorting">库存</th><th class="sorting">是否启用</th><th class="sorting">是否默认</th><th class="sorting">操作</th>';
				$("#ths").html(p);*/
				//拼接规格
				var specIds = JSON.parse(data.specIds);

				var div = "";
				var spand = [];
				$(specIds).each(function (i, e) {
					div += "<div><div class='col-md-2 title'>" + e.text + "</div>";
					div += "<div class='col-md-10 data' id='" + e.id + "' >";
					div += "</div></div>";
					spand.push(e.id);
				})
				console.log(spand);
				$("#div3").html(div);
				getFildAll(spand);
			},
			error:function(data){
				alert("系统错误，请联系管理员");
			}
		})
	}

	//组装规格中的input框
	function getFildAll(specIds) {
		$.ajax({
			url: "/tbGoodsController/getFildAll",
			data: {
				specIds:specIds
			},
			dataType: "json",
			type: "post",
			success: function (result) {
				alert(result)
				var map = result.data;
					for (var i=0; i<specIds.length;i++ ) {
						var id = specIds[i];
						var list = map[id];
						var span = "";
						$(list).each(function (i,e) {
							span += "<span>" + e.optionName +"</span><input type='checkbox' value='" + e.optionName +"'>";
						})
						$("#" + id +"").html(span)
					}
			},
			error: function () {
				alert("系统错误，请联系管理员");
			}
		})
	}


	//正文区域
	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="content"]', {
			allowFileManager : true
		});
	});

	//确认增加
	function saveTbGoods() {
		//商品名称
		var goodsName = $("#goodsName").val();
		//模板ID
		var tid = $("#tid").val();
		//品牌ID
		var TbBrandIds = $("#TbBrandIds").val();
		//副标题
		var caption = $("#caption").val();
		//获取价格
		var price = $("#price").val();
		//商品分类获取三级联动值
		var sheng = $("#sheng").val();
		var shi = $("#shi").val();
		var xian = $("#xian").val();
		//获取描述值
	 	editor.sync();
		var introduction = $("[name=content]").val();
	  //包装列表
	  var packageList = $("[name=packageList]").val();
	  //售后服务
		var saleService = $("[name=saleService]").val();


		//获取图片及颜色
		var image;
		var imageList = [];
		$("#imgTemplateId").find("tr").each(function(){
			var tdArr = $(this).children();
			//第一个td 颜色
			var color = tdArr.eq(0).html();
			//获得图片的url
			var url = tdArr.eq(1).find("img").attr("src");
			image = url;
			var data ={"color":color,"url":url};
			imageList.push(data);
		})
			var imageLists =JSON.stringify(imageList);


		//获取拓展属性
		var li = [];
		//获取拓展属性值
		$("#extension").find("input").each(function(){
			var text = $(this).attr("placeholder");
			var value = $(this).val();
			var data = {"text":text,"value":value};
			li.push(data);
		})
		var lis =JSON.stringify(li);



		//获取规格中的数据
		var specArr = [];
		var div = $("#div3").children("div");
		$.each(div,function (i,e) {
			var attrSpec = {};
			//拿到div的值
			var div1 = $(e).find('div').eq(0);
			console.log(div1.text())
			//找到所有的input框
			var input = $(e).find('div').eq(1).find('input');
			attrSpec.attributeName = $(div1).html();
			var arr = [];
			$.each(input,function (i,ee) {
				if($(ee).prop("checked")){
					arr.push($(ee).val());
				}
				attrSpec.attributeValue = arr;
			})
			specArr.push(attrSpec)
		})
		var specifiItems= JSON.stringify(specArr)







		var trList = $("#div2").find("tr");
		var itemList = [];
		for (var i = 0; i < trList.length; i++){
			var item = {};
			var value1 = $(trList[i]).find("td").eq(0).html().trim();
			var value2 = $(trList[i]).find("td").eq(1).html().trim();
			var spec = {"屏幕尺寸":value1,"网络制式":value2};
			item.spec = spec;
			var price = $(trList[i]).find("td").eq(2).find("input").val();
			item.price = price;
			var num = $(trList[i]).find("td").eq(3).find("input").val();
			item.num = num;
			itemList.push(item);
		}
		var items = JSON.stringify(itemList);


		$.ajax({
			url:"/tbGoodsController/saveTbGoods",
			type:"get",
			datatype:"json",
			data:{image:image,customAttributeItems:lis,itemImages:imageLists,goodsName:goodsName,typeTemplateId:tid,brandId:TbBrandIds,caption:caption,price:price,
				category1Id:sheng,category2Id:shi,category3Id:xian,introduction:introduction,packageList:packageList,
				saleService:saleService,items:items,specificationItems:specifiItems},
			async:true,
			success:function(result){
				alert(result.member+","+result.content+","+JSON.stringify(result.data));
				window.location.reload();
			},
			error:function(result){
				alert("系统异常，请联系管理员！！！");
			}
		})
	}


</script>

<body class="hold-transition skin-red sidebar-mini" >

            <!-- 正文区域 -->
            <section class="content">

                <div class="box-body">

                    <!--tab页-->
                    <div class="nav-tabs-custom">

                        <!--tab头-->
                        <ul class="nav nav-tabs">                       		
                            <li class="active">
                                <a href="#home" data-toggle="tab">商品基本信息</a>                                                        
                            </li>   
                            <li >
                                <a href="#pic_upload" data-toggle="tab">商品图片</a>                                                        
                            </li>    
                            <li >
                                <a href="#customAttribute" data-toggle="tab">扩展属性</a>                                                        
                            </li>     
                            <li >
                                <a href="#spec" data-toggle="tab" >规格</a>                                                        
                            </li>                       
                        </ul>
                        <!--tab头/-->
						
                        <!--tab内容-->
                        <div class="tab-content">

                            <!--表单内容-->
                            <div class="tab-pane active" id="home">
                                <div class="row data-type">                                  
								   <div class="col-md-2 title">商品分类</div>
		                          
		                           	  <div class="col-md-10 data">
		                           	  	<table>
		                           	  		<tr>
		                           	  			<td>
													<select class="form-control" name="category1Id" id="sheng" onchange="getShi(this)">
														<option value="-1">--请选择--</option>
													</select>
		                              			</td>
		                              			<td>
													<select class="form-control select-sm" name="category2Id" id="shi" onchange="getXian(this)">
														<option value="-1">--请选择--</option>
													</select>
		                              			</td>
		                              			<td>
													<select class="form-control select-sm" name="category3Id" id="xian" onchange="brandSelect(this)">
														<option value="-1">--请选择--</option>
													</select>
		                              			</td>
		                              			<td>
													模板Id：<input id="tid" type="text">
		                              			</td>
		                           	  		</tr>
		                           	  	</table>
		                              	
		                              </div>	                              
		                          	  
									
		                           <div class="col-md-2 title">商品名称</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="goodsName"  id="goodsName"  placeholder="商品名称" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">品牌</div>
		                           <div class="col-md-10 data">
		                              <select class="form-control" id="TbBrandIds" name="brandId"></select>

		                           </div>
		
								   <div class="col-md-2 title">副标题</div>
		                           <div class="col-md-10 data">
		                               <input type="text" class="form-control" name="caption" id="caption"  placeholder="副标题" value="">
		                           </div>
		                           
		                           <div class="col-md-2 title">价格</div>
		                           <div class="col-md-10 data">
		                           	   <div class="input-group">
			                          	   <span class="input-group-addon">¥</span>
			                               <input type="text" class="form-control"  name="price" id="price" placeholder="价格" value="">
		                           	   </div>
		                           </div>
		                           
		                           <div class="col-md-2 title editer">商品介绍</div>
                                   <div class="col-md-10 data editer">
                                       <textarea name="content" id="introduction"  style="width:800px;height:400px;visibility:hidden;" ></textarea>
                                   </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">包装列表</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               
		                           	<textarea rows="4"  name="packageList" class="form-control"   placeholder="包装列表"></textarea>
		                           </div>
		                           
		                           <div class="col-md-2 title rowHeight2x">售后服务</div>
		                           <div class="col-md-10 data rowHeight2x">
		                               <textarea rows="4"  name="saleService" class="form-control"    placeholder="售后服务"></textarea>
		                           </div>                        
                                  
                                    
                                </div>
                            </div>

<!--图片上传-->
<div class="tab-pane" id="pic_upload">
	<div class="row data-type">
		<!-- 颜色图片 -->
		<div class="btn-group">
			<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

		</div>

		<table class="table table-bordered table-striped table-hover dataTable">
			<thead>
			<tr>

				<th class="sorting">颜色</th>
				<th class="sorting">图片</th>
				<th class="sorting">操作</th>
			</thead>
			<tbody id="imgTemplateId">
			</tbody>
		</table>

	</div>
</div>


							<!--扩展属性-->
							<div class="tab-pane" id="customAttribute">
								<div class="row data-type" id="extension">

								</div>
							</div>

							<!--规格-->
							<div class="tab-pane" id="spec">
								<div class="row data-type">
									<div class="col-md-2 title">是否启用规格</div>
									<div class="col-md-10 data">
										<input type="checkbox" checked="true" >
									</div>
								</div>
								<p>

								<div>

									<div class="row data-type">

										<div id="div3">

										</div>

									</div>

								<div class="row data-type">
									<table class="table table-bordered table-striped table-hover dataTable">
										<thead>
										<tr id="sorting">
											<th class="sorting">屏幕尺寸</th>
											<th class="sorting">网络制式</th>
											<th class="sorting">价格</th>
											<th class="sorting">库存</th>
											<th class="sorting">是否启用</th>
											<th class="sorting">是否默认</th>
										</tr>
										</thead>
										<tbody id="div2">
										<tr>

											<td>4.0</td>

											<td>3G</td>

											<td>
												<input class="form-control"  placeholder="价格">
											</td>
											<td>
												<input class="form-control" placeholder="库存数量">
											</td>
											<td>
												<input type="checkbox" >
											</td>
											<td>
												<input type="checkbox" >
											</td>
										</tr>
										<tr>
											<td>
												4.0
											</td>
											<td>
												4G
											</td>
											<td>
												<input class="form-control"  placeholder="价格">
											</td>
											<td>
												<input class="form-control" placeholder="库存数量">
											</td>
											<td>
												<input type="checkbox" >
											</td>
											<td>
												<input type="checkbox" >
											</td>
										</tr>
										<tr>
											<td>
												5.0
											</td>
											<td>
												3G
											</td>
											<td>
												<input class="form-control"  placeholder="价格">
											</td>
											<td>
												<input class="form-control" placeholder="库存数量">
											</td>
											<td>
												<input type="checkbox" >
											</td>
											<td>
												<input type="checkbox" >
											</td>
										</tr>
										<tr>
											<td>
												5.0
											</td>
											<td>
												4G
											</td>
											<td>
												<input class="form-control"  placeholder="价格">
											</td>
											<td>
												<input class="form-control" placeholder="库存数量">
											</td>
											<td>
												<input type="checkbox" >
											</td>
											<td>
												<input type="checkbox" >
											</td>
										</tr>

										</tbody>
									</table>

								</div>

							</div>
							</div>

						</div>
						<!--tab内容/-->
						<!--表单内容/-->

					</div>
              </div>
                  <div class="btn-toolbar list-toolbar">
				      <button class="btn btn-primary" onclick="saveTbGoods()" ><i class="fa fa-save"></i>保存</button>
				      <button class="btn btn-default" >返回列表</button>
				  </div>
			
            </section>


<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabel">上传商品图片</h3>
			</div>
			<div class="modal-body">

				<table class="table table-bordered table-striped">
					<tr>
						<td>颜色</td>
						<td><input id="imageColor" class="form-control" placeholder="颜色" >  </td>
					</tr>
					<tr>
						<td>商品图片</td>
						<td>

							<table>
								<tr>
									<td>
										<label class="control-label" for="myFile">上传图片</label><!--multiple 支持多文件上传  不加这个只能上传一个文件  -->
										<input type="file" id="myFile" name="myFile" multiple />
										<input type="text" name="rimage" id="fileAddr" value="">
										<input type="hidden" id="" name="sourceid" value="0"/>
									</td>
								</tr>
							</table>

						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="uploadImage()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>


</body>

</html>